<template>
  <div class="container">
    <div class="header">
      🏆 体育AI助手
      <div class="session-controls">
        <span class="session-id">会话ID: <span>{{ displaySessionId }}</span></span>
        <button class="new-session-btn" @click="createNewSession" :disabled="isProcessing">新建会话</button>
        <button class="history-btn" @click="streamAI('history')" :disabled="isProcessing || !sessionId">查看历史</button>
        <button class="new-session-btn" @click="testH3Rendering" style="margin-left: 10px;">测试H3</button>
      </div>
    </div>
    <div class="messages" ref="messagesContainer">
      <div v-for="(message, index) in messages" :key="index" :class="['msg-row', message.role]">
        <div v-if="message.role === 'ai'" class="ai-avatar">🤖</div>
        <div :class="['msg', message.role]" v-html="message.content"></div>
      </div>
    </div>
    <form class="input-area" @submit="onSubmit" autocomplete="off">
      <textarea
        v-model="inputText"
        ref="textareaRef"
        placeholder="请输入您的问题..."
        autocomplete="off"
        required
        rows="4"
        @keydown="onKeydown"
        @input="adjustTextareaHeight"
      ></textarea>
      <button type="submit" >发送</button>
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, nextTick, onMounted, onUnmounted } from 'vue'
import { marked } from 'marked'
import { queryHistory, sendMessage } from './services/api'

// 响应式数据
const messagesContainer = ref<HTMLElement>()
const textareaRef = ref<HTMLTextAreaElement>()
const inputText = ref('')
const messages = ref<Array<{role: 'user' | 'ai', content: string}>>([])
const isProcessing = ref(false)
const sessionId = ref('')
let currentEventSource: EventSource | null = null

// 计算属性
const displaySessionId = computed(() => {
  return sessionId.value ? sessionId.value.substring(0, 16) + '...' : ''
})

// 配置 marked.js
marked.setOptions({
  breaks: true,
  gfm: true,
  headerIds: false,
  sanitize: false,
  smartypants: false
})

// 强化的markdown解析器
function simpleMarkdownParser(text: string): string {
  if (!text) return ''

  console.log('使用强化fallback解析器:', text.substring(0, 100) + '...')
  console.log('原始文本长度:', text.length)

  // 确保文本是字符串
  text = String(text)

  // 🔧 处理混合HTML+Markdown数据：先将<br>转换回换行符
  // 但是保留表格内的<br>标签
  if (text.includes('<br>')) {
    console.log('检测到混合HTML数据，正在清理<br>标签...')

    // 检查是否包含表格
    if (text.includes('|') && text.match(/\|.*<br.*\|/)) {
      console.log('检测到表格中的<br>标签，保留不处理')
      // 表格中的<br>标签保留，只处理表格外的<br>标签
      const lines = text.split('\n')
      const processedLines = lines.map(line => {
        if (line.includes('|')) {
          // 表格行，保留<br>标签
          return line
        } else {
          // 非表格行，转换<br>标签
          return line.replace(/<br\s*\/?>/gi, '\n')
        }
      })
      text = processedLines.join('\n')
    } else {
      // 没有表格，正常转换所有<br>标签
      text = text.replace(/<br\s*\/?>/gi, '\n')
    }

    console.log('<br>标签处理后:', text.substring(0, 100) + '...')
  }

  // 检测并修复字符编码问题
  text = fixEncodingIssues(text)
  console.log('编码修复后:', text.substring(0, 100) + '...')

  // 先处理表格（在换行处理之前）
  text = parseMarkdownTables(text)

  // 处理表格前后的空行问题
  text = cleanTableSpacing(text)

  let result = text
    // 处理标题 - 支持有空格或无空格的格式
    .replace(/^#### ?(.*?)$/gm, '<h4>$1</h4>')
    .replace(/^### ?(.*?)$/gm, '<h3>$1</h3>')
    .replace(/^## ?(.*?)$/gm, '<h2>$1</h2>')
    .replace(/^# ?(.*?)$/gm, '<h1>$1</h1>')

    // 处理粗体和斜体
    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
    .replace(/\*(.*?)\*/g, '<em>$1</em>')

    // 处理列表
    .replace(/^- (.*?)$/gm, '<li>$1</li>')
    .replace(/^(\d+)\. (.*?)$/gm, '<li>$2</li>')

    // 处理分隔线
    .replace(/^---$/gm, '<hr>')
    .replace(/^___$/gm, '<hr>')

    // 处理换行 - 这必须在最后处理
    .replace(/\n/g, '<br>')

    // 清理多余的br标签
    .replace(/<br><h([1-6])>/g, '<h$1>')
    .replace(/<\/h([1-6])><br>/g, '</h$1>')
    .replace(/<br><hr>/g, '<hr>')
    .replace(/<hr><br>/g, '<hr>')
    .replace(/<br><li>/g, '<li>')
    .replace(/<\/li><br>/g, '</li>')
    // 清理表格周围的br标签 - 增强版
    .replace(/<br><table>/g, '<table>')
    .replace(/<\/table><br>/g, '</table>')
    .replace(/<br><thead>/g, '<thead>')
    .replace(/<\/thead><br>/g, '</thead>')
    .replace(/<br><tbody>/g, '<tbody>')
    .replace(/<\/tbody><br>/g, '</tbody>')
    .replace(/<br><tr>/g, '<tr>')
    .replace(/<\/tr><br>/g, '</tr>')
    // 清理标题后面紧跟表格的多余br标签
    .replace(/<\/h([1-6])>(<br>)+<table>/g, '</h$1><table>')
    // 清理表格前面的连续br标签
    .replace(/(<br>){2,}<table>/g, '<br><table>')
    // 清理表格后面的连续br标签
    .replace(/<\/table>(<br>){2,}/g, '</table><br>')

  console.log('解析结果:', result.substring(0, 200) + '...')

  // 验证解析结果
  if (text.includes('###') && !result.includes('<h3>')) {
    console.error('❌ H3解析失败！')
    console.log('原始文本片段:', text.split('\n').filter(line => line.includes('###')))
  } else if (result.includes('<h3>')) {
    console.log('✅ H3解析成功！')
  }

  // 验证表格解析
  if (text.includes('|') && result.includes('<table>')) {
    console.log('✅ 表格解析成功！')
  } else if (text.includes('|') && !result.includes('<table>')) {
    console.warn('⚠️ 检测到表格标记但未生成表格HTML')
  }

  return result
}

// 表格解析函数
function parseMarkdownTables(text: string): string {
  // 简化的表格匹配正则 - 匹配标准markdown表格格式
  const lines = text.split('\n')
  let result = []
  let i = 0

  while (i < lines.length) {
    const line = lines[i]

    // 检查是否是表格行（包含|且不只是分隔符）
    if (line.includes('|') && !line.match(/^\s*\|[-\s\|:]+\|\s*$/)) {
      // 找到表格开始
      const tableStart = i
      let headerRow = line

      // 检查下一行是否是分隔符行
      if (i + 1 < lines.length && lines[i + 1].match(/^\s*\|[-\s\|:]+\|\s*$/)) {
        const separatorRow = lines[i + 1]

        // 收集表格的所有行
        let tableRows = [headerRow]
        i += 2 // 跳过分隔符行

        // 收集表体行
        while (i < lines.length && lines[i].includes('|') && lines[i].trim()) {
          tableRows.push(lines[i])
          i++
        }

        // 生成表格HTML
        if (tableRows.length > 1) {
          console.log('发现表格，行数:', tableRows.length)
          console.log('表头:', headerRow)

          try {
            // 解析表头
            const headerCells = headerRow.split('|').slice(1, -1).map((cell: string) => {
              const cleanCell = cell.trim()
              return `<th>${cleanCell}</th>`
            }).join('')

            // 解析表体
            const bodyRowsHtml = tableRows.slice(1).map((row: string) => {
              const cells = row.split('|').slice(1, -1).map((cell: string) => {
                const cleanCell = cell.trim()
                return `<td>${cleanCell}</td>`
              }).join('')
              return `<tr>${cells}</tr>`
            }).join('')

            // 生成表格HTML
            const tableHtml = `<table class="markdown-table"><thead><tr>${headerCells}</tr></thead><tbody>${bodyRowsHtml}</tbody></table>`

            console.log('生成表格HTML成功')
            console.log('表头单元格数:', headerCells.split('</th>').length - 1)
            console.log('表体行数:', bodyRowsHtml.split('</tr>').length - 1)

            // 添加表格HTML到结果
            result.push(tableHtml)

            // 跳过已处理的行
            continue
          } catch (error) {
            console.error('表格解析失败:', error)
            // 如果解析失败，按原文添加
            result.push(line)
          }
        } else {
          result.push(line)
        }
      } else {
        result.push(line)
      }
    } else {
      result.push(line)
    }

    i++
  }

  return result.join('\n')
}

// 清理表格前后的空行
function cleanTableSpacing(text: string): string {
  // 处理标题后紧跟的多个空行+表格的情况
  text = text.replace(/(#{1,6}[^\n]*)\n{3,}(<table>)/g, '$1\n\n$2')

  // 处理表格前有过多空行的情况
  text = text.replace(/\n{3,}(<table>)/g, '\n\n$1')

  // 处理表格后有过多空行的情况
  text = text.replace(/(<\/table>)\n{3,}/g, '$1\n\n')

  console.log('表格空行清理后:', text.substring(0, 200) + '...')
  return text
}

// 智能缓冲处理碎片化HTML标签和Markdown
function processFragmentedContent(content: string): { shouldDelay: boolean; processed: string } {
  // 检查是否包含可能被拆分的HTML标签或markdown标记
  const fragmentPatterns = [
    /<$/, // 标签开始被拆分
    />$/, // 标签结束被拆分  
    /^[^<>]*>/, // 标签结尾片段
    /\*$/, // markdown粗体/斜体被拆分
    /^[^*]*\*/, // markdown标记结尾片段
    /#$/, // markdown标题被拆分
    /\|$/, // 表格分隔符被拆分
    /^[^|]*\|/, // 表格片段
  ]

  // 检查是否存在碎片化模式
  const hasFragmentation = fragmentPatterns.some(pattern => pattern.test(content))

  if (hasFragmentation) {
    console.log(`🔧 检测到碎片化内容: "${content}"`)
    return { shouldDelay: true, processed: content }
  }

  return { shouldDelay: false, processed: content }
}

// 修复字符编码问题
function fixEncodingIssues(text: string): string {
  try {
    // 检测是否有编码问题
    if (text.includes('鍡') || text.includes('锛') || text.includes('闇瑕')) {
      console.warn('检测到字符编码问题，尝试修复...')

      // 尝试修复常见的UTF-8编码问题
      const fixes: Record<string, string> = {
        '鍡': '嗯',
        '锛': '，',
        '闇瑕': '需要',
        '涓撲笟': '专业',
        '瓒崇悆': '足球',
        '鍒嗘瀽': '分析',
        '鎶ュ憡': '报告',
        '鏍稿績': '核心',
        '鏁版嵁': '数据',
        '瀵姣': '对比',
        '鐘舵': '状态',
        '鎺掑悕': '排名',
        '绉鍒': '积分',
        '鍑鑳鐞': '净胜球',
        '杩鐞鏁': '进球数',
        '涓鍦': '主场',
        '瀹鍦': '客场',
        '鑳鐜': '胜率',
        '杩鏈': '近期',
        '澶鐞': '大球',
        '灏鐞': '小球',
        '鍘嗗彶': '历史',
        '浜閿': '交锋',
        '璧鐜': '赔率',
        '棰娴': '预测',
        '姣鍒': '比分',
        '骞灞': '平局',
        '鍗灏': '印尼',
        '涓浗': '中国',
        '鎬缁': '总结'
      }

      // 应用修复
      for (const [wrong, correct] of Object.entries(fixes)) {
        text = text.replace(new RegExp(wrong, 'g'), correct)
      }

      console.log('字符编码修复完成')
    }

    return text
  } catch (e) {
    console.error('字符编码修复失败:', e)
    return text
  }
}

// 添加免责声明
function addDisclaimer(content: string): string {
  const disclaimer = `

---

*⚠️ 回答内容由AI生成，仅供研究与参考之用，不构成任何正式意见或建议。*`

  return content + disclaimer
}

// 格式化AI回复内容
function formatAiContent(text: string, isStreaming = false): string {
  if (!text.trim()) return ''

  console.log('原始文本:', text) // 调试用

  // 检查是否包含思考过程 - 支持 <think> 和 <thinking> 标签
  let thinkStartIndex = text.indexOf('<think>')
  let thinkEndIndex = text.indexOf('</think>')
  let thinkTagLength = 7 // <think> 的长度
  let endTagLength = 8   // </think> 的长度

  // 如果没找到 <think>，尝试查找 <thinking>
  if (thinkStartIndex === -1) {
    thinkStartIndex = text.indexOf('<thinking>')
    thinkEndIndex = text.indexOf('</thinking>')
    thinkTagLength = 10 // <thinking> 的长度
    endTagLength = 11   // </thinking> 的长度
  }

  if (thinkStartIndex !== -1 && thinkEndIndex !== -1 && thinkEndIndex > thinkStartIndex) {
    // 完整的思考过程
    const beforeThink = text.substring(0, thinkStartIndex)
    const thinkContent = text.substring(thinkStartIndex + thinkTagLength, thinkEndIndex)
    const afterThink = text.substring(thinkEndIndex + endTagLength)

    let result = ''

    // 处理思考前的内容
    if (beforeThink.trim()) {
      result += simpleMarkdownParser(beforeThink.trim())
    }

    // 处理思考过程
    if (thinkContent.trim()) {
      result += `
        <div class="thinking-section">
          <div class="thinking-header">🤔 AI思考过程</div>
          <div class="thinking-content">${thinkContent.trim()}</div>
        </div>
      `
    }

    // 处理分析结果
    if (afterThink.trim()) {
      // 只在非流式模式下添加免责声明
      const content = isStreaming ? afterThink.trim() : addDisclaimer(afterThink.trim())
      result += `
        <div class="analysis-section">
          <div class="analysis-header">🧠 AI分析结果</div>
          <div class="analysis-content">${simpleMarkdownParser(content)}</div>
        </div>
      `
    }

    console.log('处理后的HTML:', result) // 调试用
    return result
  } else if (thinkStartIndex !== -1) {
    // 思考过程进行中
    const beforeThink = text.substring(0, thinkStartIndex)
    const thinkContent = text.substring(thinkStartIndex + thinkTagLength)

    let result = ''

    if (beforeThink.trim()) {
      result += simpleMarkdownParser(beforeThink.trim())
    }

    if (thinkContent.trim()) {
      result += `
        <div class="thinking-section">
          <div class="thinking-header">🤔 AI思考过程</div>
          <div class="thinking-content">${thinkContent.trim()}<span class="typing-indicator">●</span></div>
        </div>
      `
    }

    return result
  } else {
    // 没有思考过程，直接使用我们的强化markdown渲染器
    // 只在非流式模式下添加免责声明
    const content = isStreaming ? text : addDisclaimer(text)

    // 如果内容包含###且调试模式，使用调试解析器
    let rendered = ''
    if (content.includes('###')) {
      console.log('🔍 检测到###标记，启用调试模式')
      rendered = debugMarkdownParsing(content)
    } else {
      rendered = simpleMarkdownParser(content)
    }

    console.log('Markdown渲染结果:', rendered.substring(0, 200) + '...') // 调试用

    // 检查是否包含h3标签
    if (rendered.includes('<h3>')) {
      console.log('✅ 检测到h3标签，markdown解析正常')
    } else if (text.includes('###')) {
      console.log('⚠️  原文包含###但未生成h3标签，markdown解析可能有问题')
      console.log('原文内容:', JSON.stringify(text.substring(0, 200)))
      console.log('渲染结果:', JSON.stringify(rendered.substring(0, 200)))
    }

    return rendered
  }
}

// 添加消息到界面
function appendMsg(text: string, who: 'user' | 'ai') {
  const content = who === 'ai' ? formatAiContent(text, false) : text
  messages.value.push({ role: who, content })

  nextTick(() => {
    if (messagesContainer.value) {
      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
    }
  })
}

// 生成或获取会话ID
function generateSessionId(): string {
  let sid = sessionStorage.getItem('sportsai_sessionId')
  if (!sid) {
    sid = 'session-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9)
    sessionStorage.setItem('sportsai_sessionId', sid)
    console.log('生成新的sessionId:', sid)
  } else {
    console.log('使用已存在的sessionId:', sid)
  }
  return sid
}

// 创建新会话
function createNewSession() {
  if (confirm('确定要创建新会话吗？这将清除当前对话历史。')) {
    // 关闭当前连接
    if (currentEventSource) {
      currentEventSource.close()
    }
    // 清除存储的sessionId
    sessionStorage.removeItem('sportsai_sessionId')
    // 清空消息
    messages.value = []
    // 生成新的sessionId
    sessionId.value = generateSessionId()
  }
}

// 解析ChatMessage字符串格式的函数（复用streamAI中的逻辑）
function parseChatMessage(data: string) {
  // 解析类似 "ChatMessage{role=ASSISTANT, content=, reasoningContent='保留了', name='null', ...}" 的格式
  const match = data.match(/ChatMessage\{([^}]+)\}/)
  if (!match) return null

  const content = match[1]
  const chatMessage: any = {}

  // 解析键值对，处理引用的值
  const pairs = content.split(', ')
  for (const pair of pairs) {
    const equalIndex = pair.indexOf('=')
    if (equalIndex === -1) continue

    const key = pair.substring(0, equalIndex).trim()
    let value: string | null = pair.substring(equalIndex + 1).trim()

    // 处理引用的字符串值
    if (value.startsWith("'") && value.endsWith("'")) {
      value = value.slice(1, -1) // 去掉引号
    } else if (value === 'null') {
      value = null
    }

    chatMessage[key] = value
  }

  return chatMessage
}

// 处理历史记录数据的函数
function parseHistoryData(historyData: any): Array<{role: 'user' | 'ai', content: string, timestamp?: string}> {
  const historyMessages: Array<{role: 'user' | 'ai', content: string, timestamp?: string}> = []

  try {
    console.log('开始解析历史记录数据:', typeof historyData, historyData)

    let dataString = ''

    // 统一转换为字符串格式
    if (typeof historyData === 'string') {
      dataString = historyData
    } else if (historyData && typeof historyData === 'object') {
      if (historyData.data && typeof historyData.data === 'string') {
        dataString = historyData.data
      } else {
        dataString = JSON.stringify(historyData)
      }
    }

    // 现在处理字符串数据（和流式数据格式相同）
    if (dataString.includes('ChatMessage{')) {
      console.log('检测到ChatMessage格式，开始解析历史对话...')

      // 按行分割数据
      const lines = dataString.split('\n')
      let thinkingText = '' // 思考过程文本
      let responseText = '' // 回答内容文本

      for (const line of lines) {
        const trimmedLine = line.trim()
        if (!trimmedLine) continue

        try {
          // 尝试解析ChatMessage格式
          let chatMessage = parseChatMessage(trimmedLine)

          // 如果解析失败，尝试JSON格式
          if (!chatMessage && trimmedLine.startsWith('{')) {
            chatMessage = JSON.parse(trimmedLine)
          }

          if (chatMessage) {
            // 处理思考过程
            if (chatMessage.reasoningContent && chatMessage.reasoningContent !== 'null' && chatMessage.reasoningContent !== null) {
              thinkingText += chatMessage.reasoningContent
            }

            // 处理回答内容
            if (chatMessage.content && chatMessage.content !== '' && chatMessage.content !== null) {
              responseText += chatMessage.content
            }
          }
        } catch (e) {
          // 忽略单行解析错误，继续处理下一行
          console.log('解析单行失败，跳过:', trimmedLine.substring(0, 50))
        }
      }

      // 构建完整的AI回复内容
      let fullContent = ''
      if (thinkingText.trim()) {
        fullContent += `<think>${thinkingText}</think>`
      }
      if (responseText.trim()) {
        fullContent += responseText
      }

      if (fullContent.trim()) {
        historyMessages.push({
          role: 'ai',
          content: fullContent.trim(),
          timestamp: new Date().toLocaleString()
        })
        console.log('成功解析AI回复，内容长度:', fullContent.length)
      }

    } else if (dataString.includes('data:')) {
      console.log('检测到SSE数据格式，开始解析...')

      // 处理SSE格式的数据 - 累积所有content内容
      const lines = dataString.split('\n')
      let accumulatedContent = ''

      for (const line of lines) {
        if (line.startsWith('data:')) {
          const data = line.substring(5).trim()
          if (data && data !== '[DONE]') {
            try {
              // 尝试解析JSON格式
              const jsonData = JSON.parse(data)

              if (jsonData.content) {
                accumulatedContent += jsonData.content
              }
            } catch (e) {
              // 忽略解析错误，继续处理下一行
              console.log('解析SSE行失败:', line.substring(0, 50))
            }
          }
        }
      }

      // 检查累积的内容是否包含思考过程标签
      if (accumulatedContent.trim()) {
        console.log('累积的历史内容长度:', accumulatedContent.length)
        console.log('内容预览:', accumulatedContent.substring(0, 200) + '...')

        // 检查是否包含思考过程标签
        const hasThinkingTags = accumulatedContent.includes('<thinking>') || accumulatedContent.includes('<think>')

        let finalContent = accumulatedContent.trim()

        // 如果没有思考过程标签，将整个内容作为分析结果
        if (!hasThinkingTags) {
          console.log('历史内容没有思考标签，作为普通AI回复处理')
          // 可以选择添加一个简单的标识
          finalContent = `### 📋 历史回复内容\n\n${finalContent}`
        }

        historyMessages.push({
          role: 'ai',
          content: finalContent,
          timestamp: new Date().toLocaleString()
        })

        console.log('成功解析历史SSE数据，内容长度:', finalContent.length)
      }

    } else {
      // 其他格式，直接作为内容处理
      console.log('使用通用格式处理历史数据')
      historyMessages.push({
        role: 'ai',
        content: dataString || '空的历史记录',
        timestamp: new Date().toLocaleString()
      })
    }

  } catch (error) {
    console.error('解析历史记录数据时出错:', error)
    // 作为备用方案，将原始数据作为JSON显示
    historyMessages.push({
      role: 'ai',
      content: `### 📋 历史记录解析失败
      
**错误信息:** ${error instanceof Error ? error.message : String(error)}

**原始数据类型:** ${typeof historyData}

**原始数据预览:**
\`\`\`
${typeof historyData === 'string' ? historyData.substring(0, 500) + '...' : JSON.stringify(historyData, null, 2)}
\`\`\``,
      timestamp: new Date().toLocaleString()
    })
  }

  console.log('解析完成，历史记录条数:', historyMessages.length)
  return historyMessages
}

// 加载历史记录（流式版本）
async function loadHistory() {
  if (!sessionId.value) {
    console.error('没有会话ID')
    return
  }

  isProcessing.value = true
  console.log('正在流式查询历史记录...')

  // 添加历史记录加载提示
  const historyMessageIndex = messages.value.length
  messages.value.push({
    role: 'ai',
    content: '正在加载历史记录...<span class="typing-indicator">●</span>'
  })

  let accumulatedContent = ''  // content字段数据
  let thinkingContent = ''     // reasoningContent字段数据

  // 更新历史记录显示的辅助函数
  function updateHistoryDisplay(isComplete = false) {
    console.log('更新历史记录显示')
    console.log('思考内容长度:', thinkingContent.length)
    console.log('普通内容长度:', accumulatedContent.length)
    console.log('是否完成:', isComplete)

    let fullHistoryContent = ''

    // 如果有思考内容，添加思考标签
    if (thinkingContent.trim()) {
      fullHistoryContent += `<thinking>${thinkingContent}</thinking>`
      console.log('添加了思考内容')
    }

    // 添加分析结果内容
    if (accumulatedContent.trim()) {
      fullHistoryContent += accumulatedContent
      console.log('添加了普通内容')
    }

    console.log('完整内容长度:', fullHistoryContent.length)
    console.log('完整内容预览:', fullHistoryContent.substring(0, 200) + '...')

    // 使用和普通AI回复完全相同的格式化函数
    const formattedContent = formatAiContent(fullHistoryContent, !isComplete)

    // 如果是流式加载中，添加加载指示器
    let finalContent = formattedContent
    if (!isComplete && !formattedContent.includes('typing-indicator')) {
      finalContent += '<span class="typing-indicator">●</span>'
    }

    console.log('最终显示内容长度:', finalContent.length)

    // 直接使用格式化后的内容，不添加额外的历史记录样式包装
    messages.value[historyMessageIndex].content = finalContent

    // 滚动到底部
    nextTick(() => {
      if (messagesContainer.value) {
        messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
      }
    })
  }

  try {
    await queryHistory(
      {
        sessionId: sessionId.value,
        count: 5
      },
      // onMessage 回调：处理流式数据片段
      (content: string) => {
        console.log('收到历史记录片段:', content.substring(0, 100) + '...')

        // 检查内容类型并分别处理
        if (content.startsWith('[THINKING]')) {
          // AI思考过程内容
          const thinkingText = content.substring(10) // 移除 [THINKING] 前缀
          thinkingContent += thinkingText
          console.log('累积AI思考内容:', thinkingText, '总长度:', thinkingContent.length)
        } else if (content.startsWith('[REASONING]')) {
          // AI回答过程内容
          const reasoningText = content.substring(11) // 移除 [REASONING] 前缀
          accumulatedContent += reasoningText
          console.log('累积AI回答内容:', reasoningText, '总长度:', accumulatedContent.length)
        } else if (content.includes('<thinking>')) {
          // 兼容旧格式：检查是否是思考内容（<thinking>标签）
          const thinkMatch = content.match(/<thinking>(.*?)<\/thinking>/s)
          if (thinkMatch) {
            thinkingContent = thinkMatch[1] // 直接赋值，因为API已经累积了完整内容
            console.log('提取到思考内容:', thinkingContent.substring(0, 50) + '...')
          }
        } else {
          // 普通内容或其他内容
          accumulatedContent += content
          console.log('累积普通内容，当前长度:', accumulatedContent.length)
        }

        // 实时更新显示内容
        updateHistoryDisplay()
      },
      // onComplete 回调：流式完成处理
      (fullContent: string) => {
        console.log('历史记录流式加载完成，总内容长度:', accumulatedContent.length)
        console.log('思考内容长度:', thinkingContent.length)

        // 最终格式化并显示完整内容
        updateHistoryDisplay(true)
        isProcessing.value = false
      },
      // onError 回调：错误处理
      (error: string) => {
        console.error('流式历史记录加载失败:', error)

        const errorContent = `❌ 历史记录加载失败

**错误信息:** ${error}
**会话ID:** ${sessionId.value}

请检查网络连接或稍后重试。`

        messages.value[historyMessageIndex].content = errorContent
        isProcessing.value = false
      }
    )

  } catch (error) {
    console.error('历史记录查询异常:', error)

    const errorMessage = error instanceof Error ? error.message : String(error)
    const errorContent = `❌ 历史记录查询异常

**异常信息:** ${errorMessage}
**会话ID:** ${sessionId.value}`

    messages.value[historyMessageIndex].content = errorContent
    isProcessing.value = false
  }
}

// 测试碎片化数据处理
function testFragmentedData() {
  console.log('开始测试碎片化数据处理...')

  // 模拟碎片化的HTML和Markdown数据
  const fragmentedParts = [
    '###',
    ' ',
    '核心',
    '数据',
    '对比',
    '\n\n',
    '**',
    '巴黎',
    '圣日尔曼',
    '**',
    ' vs ',
    '**',
    '马德里',
    '竞技',
    '**',
    '\n\n',
    '|',
    '项目',
    '|',
    '巴黎',
    '|',
    '马德里',
    '|',
    '\n',
    '|',
    '---',
    '|',
    '---',
    '|',
    '---',
    '|',
    '\n',
    '|',
    '主场',
    '胜率',
    '|',
    '60%',
    '|',
    '60%',
    '|'
  ]

  // 测试逐片段累积
  let accumulated = ''
  fragmentedParts.forEach((part, index) => {
    accumulated += part
    console.log(`片段 ${index + 1}: "${part}" -> 累积内容长度: ${accumulated.length}`)
  })

  console.log('完整累积内容:', accumulated)
  console.log('解析结果:', simpleMarkdownParser(accumulated))

  // 实际添加到消息中测试
  appendMsg(accumulated, 'ai')
}

// 测试H3标题渲染
function testH3Rendering() {
  console.log('开始测试H3标题渲染...')

  // 清除之前的测试消息
  messages.value = messages.value.filter(msg =>
    !msg.content.includes('测试标题') &&
    !msg.content.includes('直接HTML测试标题') &&
    !msg.content.includes('表格测试') &&
    !msg.content.includes('碎片化测试')
  )

  // 添加碎片化数据测试
  testFragmentedData()

  // 方法1: 测试正常markdown解析
  const testContent1 = '### 测试标题\n**粗体文本**\n这是普通段落'
  console.log('测试内容1:', JSON.stringify(testContent1))
  appendMsg(testContent1, 'ai')

  // 方法2: 测试编码问题修复
  const testContent2 = '###涓撲笟瓒崇悆鍒嗘瀽鎶ュ憡\n**鏍稿績鏁版嵁**\n杩欐槸娴嬭瘯'
  console.log('测试内容2:', JSON.stringify(testContent2))
  appendMsg(testContent2, 'ai')

  // 方法3: 直接插入HTML测试CSS
  const testHTML = '<h3>直接HTML测试标题</h3><p><strong>粗体文本</strong></p><p>这是普通段落</p>'
  messages.value.push({ role: 'ai', content: testHTML })

  // 方法4: 测试各种markdown格式
  const testContent4 = '### 标题测试\n**粗体**\n*斜体*\n- 列表项1\n- 列表项2\n\n这是普通段落文本。'
  console.log('测试内容4:', JSON.stringify(testContent4))
  appendMsg(testContent4, 'ai')

  // 方法5: 测试表格解析
  const testTable = '### 表格测试\n\n|列1|列2|列3|\n|---|---|---|\n|数据1|数据2|数据3|\n|测试A|测试B|测试C|'
  console.log('测试表格:', JSON.stringify(testTable))
  appendMsg(testTable, 'ai')

  // 方法6: 测试标题后多个空行+表格的情况（模拟用户反馈的问题）
  const testTableSpacing = '### 核心数据对比\n\n\n\n|项目|巴黎圣日尔曼|马德里竞技|\n|---|---|---|\n|主场胜率|60%|60%|\n|客场胜率|60%|60%|'
  console.log('测试表格空行:', JSON.stringify(testTableSpacing))
  appendMsg(testTableSpacing, 'ai')

  setTimeout(() => {
    console.log('=== 测试完成 ===')
    // 验证H3元素是否正确生成
    const h3Count = document.querySelectorAll('.msg.ai h3').length
    console.log(`页面中总共有 ${h3Count} 个 h3 元素`)

    // 验证表格元素是否正确生成
    const tableCount = document.querySelectorAll('.msg.ai table').length
    console.log(`页面中总共有 ${tableCount} 个 table 元素`)

    if (h3Count > 0) {
      console.log('✅ H3元素生成成功！')
    } else {
      console.error('❌ 未找到任何H3元素！')
    }

    if (tableCount > 0) {
      console.log('✅ 表格元素生成成功！')
    } else {
      console.warn('⚠️ 未找到任何表格元素！')
    }
  }, 100)
}

// 调用我们的后端API
async function streamAI(userText: string) {
  const aiMessageIndex = messages.value.length
  messages.value.push({ role: 'ai', content: '' })

  // 历史记录请求特殊处理
  if (userText === 'history') {
    await loadHistory()
    return
  }

  // 使用与查看历史完全相同的逻辑
  isProcessing.value = true
  console.log('正在发送消息...', userText)

  let accumulatedContent = ''  // content字段数据
  let thinkingContent = ''     // reasoningContent字段数据

  // 更新显示内容的辅助函数 - 与查看历史完全相同
  function updateDisplay(isComplete = false) {
    console.log('更新显示内容')
    console.log('思考内容长度:', thinkingContent.length)
    console.log('普通内容长度:', accumulatedContent.length)
    console.log('是否完成:', isComplete)

    let fullContent = ''

    // 如果有思考内容，添加思考标签
    if (thinkingContent.trim()) {
      fullContent += `<thinking>${thinkingContent}</thinking>`
      console.log('添加了思考内容')
    }

    // 添加分析结果内容
    if (accumulatedContent.trim()) {
      fullContent += accumulatedContent
      console.log('添加了普通内容')
    }

    console.log('完整内容长度:', fullContent.length)
    console.log('完整内容预览:', fullContent.substring(0, 200) + '...')

    // 使用和普通AI回复完全相同的格式化函数
    const formattedContent = formatAiContent(fullContent, !isComplete)

    // 如果是流式加载中，添加加载指示器
    let finalContent = formattedContent
    if (!isComplete && !formattedContent.includes('typing-indicator')) {
      finalContent += '<span class="typing-indicator">●</span>'
    }

    console.log('最终显示内容长度:', finalContent.length)

    // 直接使用格式化后的内容
    messages.value[aiMessageIndex].content = finalContent

    // 滚动到底部
    nextTick(() => {
      if (messagesContainer.value) {
        messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
      }
    })
  }

  try {
    // 使用sendMessage API函数发送用户消息
    await sendMessage(
      {
        message: userText,
        sessionId: sessionId.value
      },
      // onMessage 回调：处理流式数据片段 - 与查看历史完全相同
      (content: string) => {
        console.log('收到消息片段:', content.substring(0, 100) + '...')

        // 检查内容类型并分别处理 - 与查看历史完全相同
        if (content.startsWith('[THINKING]')) {
          // AI思考过程内容
          const thinkingText = content.substring(10) // 移除 [THINKING] 前缀
          thinkingContent += thinkingText
          console.log('累积AI思考内容:', thinkingText, '总长度:', thinkingContent.length)
        } else if (content.startsWith('[REASONING]')) {
          // AI回答过程内容
          const reasoningText = content.substring(11) // 移除 [REASONING] 前缀
          accumulatedContent += reasoningText
          console.log('累积AI回答内容:', reasoningText, '总长度:', accumulatedContent.length)
        } else if (content.includes('<thinking>')) {
          // 兼容旧格式：检查是否是思考内容（<thinking>标签）
          const thinkMatch = content.match(/<thinking>(.*?)<\/thinking>/s)
          if (thinkMatch) {
            thinkingContent = thinkMatch[1] // 直接赋值，因为API已经累积了完整内容
            console.log('提取到思考内容:', thinkingContent.substring(0, 50) + '...')
          }
        } else {
          // 普通内容或其他内容
          accumulatedContent += content
          console.log('累积普通内容，当前长度:', accumulatedContent.length)
        }

        // 实时更新显示内容
        updateDisplay()
      },
      // onComplete 回调：流式完成处理 - 与查看历史完全相同
      (fullContent: string) => {
        console.log('消息流式加载完成，总内容长度:', accumulatedContent.length)
        console.log('思考内容长度:', thinkingContent.length)

        // 最终格式化并显示完整内容
        updateDisplay(true)
        isProcessing.value = false
      },
      // onError 回调：错误处理 - 与查看历史完全相同
      (error: string) => {
        console.error('流式消息加载失败:', error)

        const errorContent = `❌ 消息发送失败

**错误信息:** ${error}
**会话ID:** ${sessionId.value}

请检查网络连接或稍后重试。`

        messages.value[aiMessageIndex].content = errorContent
        isProcessing.value = false
      }
    )

  } catch (error) {
    console.error('消息发送异常:', error)

    const errorMessage = error instanceof Error ? error.message : String(error)
    const errorContent = `❌ 消息发送异常

**异常信息:** ${errorMessage}
**会话ID:** ${sessionId.value}`

    messages.value[aiMessageIndex].content = errorContent
    isProcessing.value = false
  }
}

// 表单提交处理
function onSubmit(e: Event) {
  e.preventDefault()
  if (isProcessing.value) return

  const userText = inputText.value.trim()
  if (!userText) return

  appendMsg(userText, 'user')
  inputText.value = ''
  isProcessing.value = true

  // 重置textarea高度
  if (textareaRef.value) {
    textareaRef.value.style.height = 'auto'
  }

  streamAI(userText)
}

// 键盘事件处理
function onKeydown(e: KeyboardEvent) {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault()
    onSubmit(e)
  }
}

// 调整textarea高度
function adjustTextareaHeight() {
  if (textareaRef.value) {
    textareaRef.value.style.height = 'auto'
    textareaRef.value.style.height = Math.min(textareaRef.value.scrollHeight, 120) + 'px'
  }
}

// 测试markdown解析的专用函数
function debugMarkdownParsing(text: string) {
  console.log('=== 开始调试Markdown解析 ===')
  console.log('原始文本:', JSON.stringify(text))
  console.log('原始文本预览:', text.substring(0, 200))

  // 检查是否包含###
  const hasH3 = text.includes('###')
  console.log('是否包含###:', hasH3)

  if (hasH3) {
    // 找到所有###行
    const lines = text.split('\n')
    const h3Lines = lines.filter(line => line.includes('###'))
    console.log('找到的###行:', h3Lines)

    // 逐行测试正则表达式
    h3Lines.forEach((line, index) => {
      console.log(`测试第${index + 1}行:`, JSON.stringify(line))

      // 测试各种正则表达式模式
      const patterns = [
        /^### ?(.*?)$/,
        /^###(.*)$/,
        /###(.*)$/,
        /^### (.*?)$/
      ]

      patterns.forEach((pattern, pIndex) => {
        const match = line.match(pattern)
        console.log(`  模式${pIndex + 1} (${pattern.source}):`, match ? match[1] : '未匹配')
      })
    })
  }

  // 执行实际的markdown解析
  const result = simpleMarkdownParser(text)
  console.log('解析结果预览:', result.substring(0, 300))

  // 检查是否生成了h3标签
  const hasH3Tag = result.includes('<h3>')
  console.log('是否生成了<h3>标签:', hasH3Tag)

  if (hasH3Tag) {
    const h3Matches = result.match(/<h3>(.*?)<\/h3>/g)
    console.log('生成的h3标签:', h3Matches)
  }

  console.log('=== Markdown解析调试完成 ===')
  return result
}

// 组件挂载时初始化
onMounted(() => {
  sessionId.value = generateSessionId()
})

// 组件卸载时清理资源
onUnmounted(() => {
  // 清理资源
})
</script>

<style>
/* 全局重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
}

#app {
  height: 100vh;
  width: 100vw;
}

:root {
  --primary: #6366f1;
  --primary-light: #8b5cf6;
  --bg-dark: #111827;
  --bg-mid: #1f2937;
  --bg-light: #374151;
  --text-primary: #f9fafb;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  --border: #374151;
  --radius: 8px;
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-dark);
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  height: 100vh;
  overflow: hidden;
}

.container {
  width: 100vw;
  height: 100vh;
  background: var(--bg-dark);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.header {
  padding: 20px 0;
  background: var(--bg-mid);
  color: var(--text-primary);
  text-align: center;
  font-size: 1.3em;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.session-controls {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  font-size: 12px;
  flex-wrap: wrap;
}

.session-id {
  color: var(--text-muted);
  font-family: monospace;
}

.new-session-btn {
  padding: 6px 12px;
  border: none;
  border-radius: var(--radius);
  background: var(--primary) !important;
  color: white !important;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.new-session-btn:hover:not(:disabled) {
  background: var(--primary-light) !important;
  transform: translateY(-1px);
}

.new-session-btn:disabled {
  background: var(--bg-light) !important;
  cursor: not-allowed;
  transform: none;
}

.history-btn {
  padding: 6px 12px;
  border: none;
  border-radius: var(--radius);
  background: #059669 !important;
  color: white !important;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.history-btn:hover:not(:disabled) {
  background: #047857 !important;
  transform: translateY(-1px);
}

.history-btn:disabled {
  background: var(--bg-light) !important;
  cursor: not-allowed;
  transform: none;
}

.messages {
  flex: 1;
  padding: 20px;
  padding-bottom: 140px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  background: var(--bg-dark);
  height: calc(100vh - 200px);
}

.msg-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 85%;
}

.msg-row.user {
  justify-content: flex-end;
  margin-left: auto;
}

.msg-row.ai {
  justify-content: flex-start;
}

.msg {
  padding: 16px 20px;
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
}

.msg.user {
  background: var(--primary);
  color: white;
  border-bottom-right-radius: 4px;
  box-shadow: var(--shadow);
}

.msg.ai {
  background: var(--bg-mid);
  color: var(--text-secondary);
  border-bottom-left-radius: 4px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.ai-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: white;
  flex-shrink: 0;
  margin-top: 2px;
}

.input-area {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-mid);
  border-top: 1px solid var(--border);
  padding: 16px;
  display: flex;
  gap: 12px;
  z-index: 10;
  box-sizing: border-box;
}

.input-area textarea {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  resize: none;
  min-height: 44px;
  max-height: 100px;
  background: var(--bg-dark);
  color: var(--text-primary);
  transition: border-color 0.2s ease;
  font-family: inherit;
  line-height: 1.4;
}

.input-area textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.input-area textarea::placeholder {
  color: var(--text-muted);
}

.input-area button {
  padding: 0 20px;
  border: none;
  border-radius: var(--radius);
  background: var(--primary) !important;
  color: white !important;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  height: 44px;
  min-width: 70px;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.input-area button:hover:not(:disabled) {
  background: var(--primary-light) !important;
  transform: translateY(-1px);
}

.input-area button:disabled {
  background: var(--bg-light) !important;
  cursor: not-allowed;
  transform: none;
}

/* AI消息内的Markdown样式 */
.msg.ai h1, .msg.ai h2, .msg.ai h3, .msg.ai h4, .msg.ai h5, .msg.ai h6 {
  color: var(--text-primary) !important;
  margin: 16px 0 8px 0 !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

.msg.ai h1 {
  font-size: 1.4em !important;
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 6px !important;
}

.msg.ai h2 {
  font-size: 1.2em !important;
  color: var(--primary) !important;
}

.msg.ai h3 {
  font-size: 1.1em !important;
  color: var(--primary) !important;
  background: rgba(99, 102, 241, 0.08) !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  display: inline-block !important;
}

.msg.ai h4 {
  font-size: 1em !important;
  color: var(--text-secondary) !important;
}

.msg.ai p {
  margin: 6px 0 !important;
  line-height: 1.6 !important;
  color: var(--text-secondary) !important;
}

.msg.ai strong {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

.msg.ai em {
  color: var(--primary) !important;
  font-style: italic !important;
}

.msg.ai code {
  background: var(--bg-light) !important;
  color: var(--primary) !important;
  padding: 2px 4px !important;
  border-radius: 3px !important;
  font-size: 13px !important;
  font-family: monospace !important;
}

.msg.ai pre {
  background: var(--bg-light) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 12px !important;
  margin: 10px 0 !important;
  overflow-x: auto !important;
}

.msg.ai pre code {
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

.msg.ai ul, .msg.ai ol {
  margin: 8px 0 !important;
  padding-left: 16px !important;
}

.msg.ai li {
  margin: 3px 0 !important;
  line-height: 1.5 !important;
  color: var(--text-secondary) !important;
}

.msg.ai blockquote {
  border-left: 3px solid var(--primary) !important;
  background: rgba(99, 102, 241, 0.05) !important;
  margin: 10px 0 !important;
  padding: 8px 12px !important;
  border-radius: 0 4px 4px 0 !important;
  color: var(--text-secondary) !important;
  font-style: italic !important;
}

.msg.ai table,
.msg.ai .markdown-table {
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 15px 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.msg.ai th,
.msg.ai td,
.msg.ai .markdown-table th,
.msg.ai .markdown-table td {
  border: 1px solid var(--border) !important;
  padding: 8px 12px !important;
  text-align: left !important;
  vertical-align: top !important;
  line-height: 1.4 !important;
}

.msg.ai th,
.msg.ai .markdown-table th {
  background: var(--bg-light) !important;
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

.msg.ai td,
.msg.ai .markdown-table td {
  color: var(--text-secondary) !important;
  font-size: 12px !important;
}

/* 表格内的br标签处理 */
.msg.ai .markdown-table th br,
.msg.ai .markdown-table td br {
  display: block !important;
  content: "" !important;
  margin: 2px 0 !important;
}

.msg.ai hr {
  border: none !important;
  height: 1px !important;
  background: var(--border) !important;
  margin: 16px 0 !important;
}

/* 思考过程样式 */
.thinking-section {
  background: rgba(107, 114, 128, 0.1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin: 12px 0;
}

.thinking-header {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.thinking-content {
  color: var(--text-muted);
  font-style: italic;
  opacity: 0.9;
  line-height: 1.4;
  font-size: 13px;
}

/* 分析结果样式 */
.analysis-section {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 16px;
}

.analysis-header {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 打字指示器 */
.typing-indicator {
  display: inline-block;
  color: var(--primary);
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* 历史记录样式 */
.history-message {
  border-left: 3px solid #6366f1;
  padding-left: 12px;
  margin: 8px 0;
  background: rgba(99, 102, 241, 0.05);
  border-radius: 0 6px 6px 0;
}

.history-label {
  font-size: 12px;
  color: #6366f1;
  font-weight: 600;
  margin-bottom: 6px;
  opacity: 0.8;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 历史记录中的用户消息样式调整 */
.msg-row.user .history-message {
  border-left-color: #059669;
  background: rgba(5, 150, 105, 0.05);
}

.msg-row.user .history-label {
  color: #059669;
}

/* 滚动条样式 */
.messages::-webkit-scrollbar {
  width: 4px;
}

.messages::-webkit-scrollbar-track {
  background: transparent;
}

.messages::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

.messages::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .header {
    font-size: 1.1em;
    padding: 16px 0;
  }
  .session-controls {
    font-size: 11px;
    gap: 10px;
    padding: 0 10px;
  }
  .messages {
    padding: 16px 12px 120px 12px;
    gap: 16px;
    height: calc(100vh - 180px);
  }
  .msg-row {
    max-width: 92%;
  }
  .msg {
    padding: 12px 16px;
    font-size: 13px;
  }
  .input-area {
    padding: 12px;
  }
  .input-area textarea {
    padding: 12px 16px;
    min-height: 44px;
  }
  .input-area button {
    height: 44px;
    min-width: 70px;
    padding: 0 20px;
    background: var(--primary) !important;
  }
  .ai-avatar {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  .new-session-btn {
    padding: 4px 8px;
    font-size: 10px;
  }
}
</style>
